<template>
  <BasicModal
    @register="registerModal"
    :title="title"
    :showCancelBtn="false"
    :showOkBtn="issueType == 'issueAll' && getUserCount === 0 ? false : true"
    :min-height="modalHeight"
    :okText="$t('table.system.system_check_to_delivery')"
    @ok="okSubmit"
    :width="modalWidth"
  >
    <div class="issue" v-if="issueType == 'issueAll'">
      <div class="font-bold !text-center"
        >{{ $t('table.system.system_send_people') }}：{{ getUserCount }}</div
      >
      <div class="font-bold !text-center"
        >{{ $t('table.system.system_lock_people') }}：{{ getLockCount }}</div
      >
      <div class="box-shadow showdowBox">
        <span class="!text-center">{{ $t('table.system.system_delivery_amount') }} </span>
        <ul class="ant-col px-4">
          <li v-for="(value, key) in getAmount" :key="key"
            ><cdIconCurrency class="w-20px mr-5px" :icon="key" />{{ key }}:
            <span>{{ value }}</span></li
          >
        </ul>
      </div>
      <div class="box-shadow showdowBox">
        <span class="!text-center">{{ $t('table.system.system_lock_money') }}</span>
        <ul class="ant-col px-4">
          <li v-for="(value, key) in getLockAmont" :key="key"
            ><cdIconCurrency :icon="key" /> {{ key }}: <span>{{ value }}</span></li
          >
        </ul>
      </div>
    </div>

    <div class="issue one-issue" v-if="issueType == 'issueOne'">
      <div class="box-shadow alert-text">
        <div class="text-left ml-2 mb-3">
          <label>{{ t('modalForm.discountActivity.sendCurency') }}：</label>
          <cdIconCurrency :icon="currentyOptions[currenty]" class="w-20px mr-5px" /><span>{{
            currentyOptions[currenty]
          }}</span>
        </div>
        <!--发放金额-->
        <div class="text-left ml-2">
          <label>{{ $t('table.system.system_delivery_amount') }}：</label>
          <span>{{ amountTotal }}</span>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  import { defineComponent, ref, computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDebounceFn } from '@vueuse/core';
  import {
    getDetailSendAll,
    updateSendReviewAll,
    updateSendSingleReview,
  } from '/@/api/commission/index.ts';
  import { message } from 'ant-design-vue';
  import { currentyOptions } from '/@/views/common/commonSetting';
  import cdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';
  import { setEndformatDate, setStartformatDate } from '/@/utils/dateUtil';

  const { t } = useI18n();
  const issueType = ref<String>('');
  let title = ref<String>('');
  const getLockCount = ref(null as any);
  const getUserCount = ref(null as any);
  const getLockAmont = ref(null as any);
  const getAmount = ref(null as any);
  const getSendDeatil = ref(null as any);
  const getSingleId = ref(null as any);
  const getSingleUsername = ref(null as any);
  const modalWidth = ref('270px' as any);
  const modalHeight = ref(0 as number);
  const amountTotal = ref('' as any);
  const currenty = ref(null as any);
  const emit = defineEmits(['reloadPage']);

  const [registerModal, { setModalProps, closeModal, changeOkLoading }] = useModalInner(
    async (data) => {
      //console.log(data);
      getSingleId.value = data?.records?.id;
      amountTotal.value = data?.records?.commission_amount_total;
      getSingleUsername.value = data?.records?.username;
      //console.log(getSingleUsername.value);
      getSendDeatil.value = data.times;
      issueType.value = data?.issueType;
      console.log(data);
      // if (data?.data?.length > 0) {
      //   params.start_time = params.time[0] ? setStartformatDate(params.time[0]) : null;
      //   params.end_time = params.time[1] ? setEndformatDate(params.time[1]) : null;
      // }
      // delete params.time;

      data.times.start_time = data.times.time[0] ? setStartformatDate(data.times.time[0]) : null;
      data.times.end_time = data.times.time[1] ? setEndformatDate(data.times.time[1]) : null;
      delete data.times.time;

      if (issueType.value === 'issueAll') {
        currenty.value = data.currency;
        const getData = await getDetailSendAll({
          currency_id: data.currency,
          ...data.times,
          // start_time: data.times.start_time,
          // end_time: data.times.end_time,
        });
        getLockCount.value = getData.lock_user_count;
        getUserCount.value = getData.user_count;
        getLockAmont.value = getData.lock_amount;
        getAmount.value = getData.amount;
        modalWidth.value = '520px';
        modalHeight.value = 200;
        //console.log(modalHeight.value);
      } else {
        currenty.value = data?.records.currency_id;
        modalWidth.value = '400px';
        modalHeight.value = 100;
        console.log(modalHeight.value);
      }
      //console.log(getLockCount.value);
      //setModalProps({ height: modalHeight.value });
      title.value =
        issueType.value == 'issueAll'
          ? t('table.system.system_click_delivery')
          : `${t('table.system.system_delivery_commission')}【${getSingleUsername.value} 】`; // 一键发放' : `发放佣金${'用户username'}
    },
  );
  const okSubmit = useDebounceFn(async function () {
    changeOkLoading(true);
    getSendDeatil.value['currency_id'] = currenty.value;
    const { status, data } =
      issueType.value == 'issueAll'
        ? await updateSendReviewAll(getSendDeatil.value)
        : await updateSendSingleReview({ id: getSingleId.value });
    if (status) {
      emit('reloadPage');
      changeOkLoading(false);
      message.success(data);
      setTimeout(() => {
        closeModal();
      }, 1000);
    } else {
      changeOkLoading(false);
      message.error(data);
    }
  }, 500);
  defineExpose({
    changeOkLoading,
  });
</script>
<style lang="less" scoped>
  .issue {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    height: 300px;

    div {
      text-align: left;
      flex-basic: auto;
    }

    .font-bold {
      margin: 14px 0 20px;
    }

    .box-shadow {
      width: 40%;
      padding: 10px 0;
      font-size: 14px;

      & > span {
        display: block;
        padding-bottom: 12px;
        color: #02a7f0;
      }

      ul {
        li {
          margin: 5px;
        }
      }
    }

    .showdowBox {
      border: 1px solid rgb(0 0 0 / 26%);
      border-radius: 4px;
      box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    }

    .alert-text {
      color: #444 !important;
      font-weight: 500 !important;
    }

    &.one-issue {
      .box-shadow {
        width: 90%;
      }
    }
  }

  .one-issue {
    height: 100px;
  }
</style>
